<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件</title>
</head>

<body>
  <style>
    /* heli-button {
      --background-color: #666;

    } */

    :root {
      --background-color: #999;

    }
  </style>
  <heli-button type="primary">我的按钮</heli-button>
  <heli-button>我的按钮</heli-button>

  <!-- 内容是不会被渲染到视图上， 不会影响页面展示， 可以使用模板 -->
  <template id="btn">
    <button class="heli-button">
      <slot>默认按钮</slot>
    </button>
  </template>

  <script>
    class HeliButton extends HTMLElement {
      constructor() {
        super();
        console.log(this);
        let shadow = this.attachShadow({ mode: "open" });

        let btnTmpl = document.getElementById("btn");

        // 拷贝
        let cloneTmpl = btnTmpl.content.cloneNode(true);
        // 获取属性
        let type = this.getAttribute("type") || "default";

        const btnList = {
          "primary": {
            background: "#409eff",
            color: '#fff',
          },
          "default": {
            background: "#909399",
            color: "#fff"
          }
        }
        // 样式
        const style = document.createElement("style");
        style.textContent = `
          .heli-button{
            outline: none;
            border: none;
            border-radius: 4px;
            padding: 5px 20px;
            display: inline-flex;
            background: var(--background-color, ${btnList[type].background});
            color: var(--text-color, ${btnList[type].color});
            cursor: pointer;
          }
        `;


        // dom操作具备移动性
        shadow.appendChild(style)
        shadow.appendChild(cloneTmpl)
      }
    }
    // 定义了一个自定义标签 组件
    window.customElements.define("heli-button", HeliButton);
  </script>
</body>

</html>